<template>
	<view class="p12 pt0">
		<view class="module-tips p12 fz13 mb12">底稿存放作品数量上限为{{userInfo.compositionMaxCount || 0}}条</view>
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view @click="toInfo(item)" class="demo-warter pr6" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">{{item.title}}</view>

					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view @click="toInfo(item)" class="demo-warter pl6" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">{{item.title}}</view>

					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				curTab: 1,
				loadStatus: 'loadmore',
				flowList: [],
				keyword: '',
				isLogin: false,
				userInfo: {},
				list: []
			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.tabbarList || '';
			},
		},
		onLoad() {
			this.initData();

			if (this.$db.get("userToken")) {
				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.isLogin = true
						this.userInfo = res.data;
					}
				})

			}
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toInfo(item) {
				let that = this
				uni.showActionSheet({
					itemList: ['继续编辑', '删除底稿'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.navigateTo({
								url: '/pages/diy/index?diyId=' + item.id
							})
						} else if (res.tapIndex == 1) {


							that.$common.modelShow('提示', '确认要删除该底稿吗?', () => {
								
								
									that.$api.compositionDelete({
										id: item.id
									}, res => {
										if (res.code == 200) {
								
											that.$common.successToShow('删除成功', ress => {
												that.initData()
											})
										} else {
											that.$common.errorToShow(res.message)
										}
									})
							});
						}
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					}
				});
				// uni.navigateTo({
				// 	url: '/pages/community/info?id=' + item.id
				// })
			},


			initData() {
				this.page = 1
				this.flowList = []
				this.$refs.uWaterfall.clear();
				this.getData()

			},
			getData() {
				this.$api.compositionList({
					pageNo: this.page,
					keyword: this.keyword,
					pageSize: 10,
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style>
</style>

<style lang="scss" scoped>
	.module-tips {
		background: rgba(25, 41, 28, 0.05);
	}
</style>